<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-form>
          <el-form-item label="显示类型">
            <el-radio-group v-model="displayType">
              <el-radio label="RelationGraph">关系图</el-radio>
              <el-radio label="Heatmap">热力图</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="Layer">
            <el-select v-model="layer" placeholder="请选择">
              <el-option v-for="l in Array(attentions.length).fill().map((v,i)=>i)" :key="'atlayer'+l" :label="l" :value="l"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Head">
            <el-select v-model="head" placeholder="请选择">
              <el-option label="0" value="0"></el-option>
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
              <el-option label="3" value="3"></el-option>
              <el-option label="4" value="4"></el-option>
              <el-option label="5" value="5"></el-option>
              <el-option label="6" value="6"></el-option>
              <el-option label="7" value="7"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="过滤">
            <el-slider v-model="filterMin" :min="0" :max="0.3" :step="0.01" :show-input="false" :show-input-controls="false" input-size="small"/>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="18" v-if="labels.length > 0">
        <Heatmap v-if="displayType === 'Heatmap'" :labels="labels" :attentions="attentions[layer][head]" :filterMin=filterMin>
        </Heatmap>
        <RelationGraph v-else-if="displayType === 'RelationGraph'" :labels="labels" :relations="attentions[layer][head]" :filterMin=filterMin></RelationGraph>
      </el-col>
      <el-col :span="18" v-else>
        <div class="no-data-spaceholder">请先执行翻译，才有数据显示</div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Heatmap from './Heatmap.vue'
import RelationGraph from './RelationGraph.vue'
const props = defineProps({
  attentions: {
    type: Array,
    required: true
  },
  labels: {
    type: Array,
    required: true
  }
});
const displayType = ref('RelationGraph')
const layer = ref('0')
const head = ref('0')
const filterMin = ref(0)
</script>
<style>
.el-row {
  margin-top: 20px;
}

.no-data-spaceholder {
  width: 500px;
  height: 500px;
}
</style>
